<template>
    <div class="center">
     <!-- 搜索 -->
     <div class="top">
     <input placeholder="请输入商品名称" v-model="shoppname"></input>
     <button @click="comclik"><img src="../assets/Desktop/图标/搜索.png" alt=""></button>
 </div>
 <div class="box1">
     <el-table :data="comlist" style="width: 100%">
         <el-table-column  label="商品名称" prop="goodsName" />
         <el-table-column prop="userName" label="用户"  />
         <el-table-column>
            <template #default="scope">
             <span class="look" @click="looks(scope.row.userId,scope.row.shopId)">查看聊天记录</span>
            </template>
         </el-table-column>
         </el-table>
         <div class="foot">
             <el-pagination
                 background
                 layout="prev, pager, next"
                 :total="total"
                 :page-size="pageSize"
                 :page-count="total"
                 @current-change="pageChange"/>
         </div>
 
 </div>
                <el-dialog v-model="lookslist" title="聊天记录">
                     <div class="boxes" v-for="item in lookList">
                         <div class="shoplook" v-if="item.statu=='0'">
                             <p class="shopp">{{ item.chatTime }}</p>
                             <p class="shopp1">{{ item.shopName }}</p>
                             <p class="shopp1">{{ item.chat }}</p>
                         </div>
                         <div class="shoplook1" v-if="item.statu=='1'">
                             <p class="shopp">{{ item.chatTime }}</p>
                             <p class="shopp1">{{ item.userName }}</p>
                             <p class="shopp1">{{ item.chat }}</p>
                         </div>
                     </div>
                 </el-dialog>
    </div>
 </template>
 
 <script setup>
    import { reactive,ref,getCurrentInstance, onMounted } from 'vue';
    import axioes from 'axios';
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { UserFilled } from '@element-plus/icons-vue'
 import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults';
    var axios=getCurrentInstance();
    var shoppname=ref("");
    var url="http://192.168.199.11:8001/ShoppingStreet"
   let token=ref(localStorage.getItem("token")||"");
   let adminId=localStorage.getItem("adminId");
   let shopid=localStorage.getItem("shopId");
   let lookslist=ref(false);
    // 分页
    let pageSize = 7;
     let currentPage = ref(1);
     let total = ref(1);
     const pageChange = (newPage) => {
         currentPage.value = newPage;
         comList();
     };
 //   渲染界面
 let comlist=ref([]);
  function comList(){
     let  data={
                 pageIndex:currentPage.value,
                 pageSize:pageSize,
                 shopId:Number(shopid)
             }
             axioes.defaults.headers.common['token'] = token.value;
      axios.proxy.$http.post(url+"/merchant/talkServerList",data).then(function(res){
            console.log(res);
            comlist.value=res.data.data.talkList;
            total.value=res.data.data.pageCount;
      })
  }
 //   搜索
 function comclik(){
     let  data={
                 pageIndex:currentPage.value,
                 pageSize:pageSize,
                 goodsName:shoppname.value,
                 shopId:shopid
             }
             axioes.defaults.headers.common['token'] = token.value;
      axios.proxy.$http.post(url+"/merchant/talkServerList",data).then(function(res){
            comlist.value=res.data.data.talkList;
            total.value=res.data.data.pageCount;
      })
 }
 let lookList=ref([]);
 // 查看聊天记录接口
 function looks(userid,shopid){
     lookslist.value=true
     let  data={
                 pageIndex:currentPage.value,
                 pageSize:pageSize,
                 userId:userid,
                 shopId:shopid
             }
             axioes.defaults.headers.common['token'] = token.value;
      axios.proxy.$http.post(url+"/merchant/talkServer",data).then(function(res){
            console.log(res);
            lookList.value=res.data.data;
            total.value=res.data.data.pageCount;
      })
 }
  onMounted(function(){
     comList();
  })
 </script>
 
 <style lang="less" scoped>
  *{
     margin: 0;
     padding: 0;
    }
    .center{
      width: 100%;
      height: 100%;
      background: #f5f5f5;
      :deep( .el-tabs__header){
         background-color: #fff;
         }
        :deep(.el-tabs--left .el-tabs__active-bar.is-left){
             left: 10px;
         }
         :deep(.el-tabs__nav-wrap::after) {
         position: static !important;
         }
         :deep(.el-tabs__item.is-active, .el-tabs__item):hover{
             color:#000;
         }
         .top{
             width:90%;
             height: 50px;
             margin: 0 auto;
             display: flex;
             align-items: center;
             input{
                 width:15%;
                 height: 50%;
                 border:none;
                 border-radius: 3px;
                 margin-left: 2%;
                 box-shadow: 0 1px 10px #ccc;
                 padding-left: 20px;
             }
             button{
                 width: 30px;
                 height: 30px;
                 background: #5883df;
                 border-radius: 3px;
                 border:none;
                 margin-left: 1%;
                 img{
                     width: 20px;
                     height: 20px;
                 }
             }
           
         }
      .box1{
         width: 90%;
         height: 470px;
         margin: 0 auto;
         background-color: #fff;
         border-radius: 10px;
         box-shadow: 1px 1px 10px #ccc;
         position: relative;
         :deep(.cell){
             text-align: center;
             color: #000;
             font-weight: 400;
         }
         select{
                border: none;
             }
             .foot{
             width: 90%;
             height: 10%;
             display: flex;
             justify-content: center;
             position: absolute;
             bottom: 15px;
         }
        :deep( .el-pagination){
             justify-content: center;
         }
      }
     }
     .el-table {
         --el-table-border-color: none;
         --el-table-border:none
     }
     .look{
         color: #757575;
     }
     :deep(.el-dialog__header.show-close){
     text-align: center;
    }
    :deep(.el-dialog ){
     --el-dialog-width: 30%;
     --el-border-radius-base: 0px;
 }
 .shoplook{
     width: 100%;
     height: 100px;
     text-align: left;
     .shopp{
         font-size: 12px;
         color: #757575;
     }
     .shopp1{
         color: #000;
     }
 }
 .shoplook1{
     width: 100%;
     height: 100px;
     text-align: right;
     .shopp{
         font-size: 12px;
         color: #757575;
     }
     .shopp1{
         color: #000;
     }
 }
 </style>